import React from 'react';
import ExampleItem from '../ExampleItem';

const code = `const Component = (
  <div dir="rtl">
    <Tabs direction={'rtl'}>
      <TabList>
        <Tab>כותרת</Tab>
        <Tab disabled>כותרת כבויה</Tab>
        <Tab>כותרת שנייה</Tab>
        <Tab>כותרת שלישית</Tab>
      </TabList>
      <TabPanel>
        <p>
          לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית. סת אלמנקום ניסי נון ניבאה. דס איאקוליס וולופטה דיאם. וסטיבולום אט דולור, קראס אגת לקטוס וואל אאוגו וסטיבולום סוליסי טידום בעליק. קונדימנטום קורוס בליקרה, נונסטי קלובר בריקנה סטום, לפריקך תצטריק לרטי.
        </p>
        <p>
          Source:{' '}
          <a href="https://en.wikipedia.org/wiki/" target="_blank">
            Wikipedia
          </a>
        </p>
      </TabPanel>
      <TabPanel>
        <p>
        לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית. סת אלמנקום ניסי נון ניבאה. דס איאקוליס וולופטה דיאם. וסטיבולום אט דולור, קראס אגת לקטוס וואל אאוגו וסטיבולום סוליסי טידום בעליק. קונדימנטום קורוס בליקרה, נונסטי קלובר בריקנה סטום, לפריקך תצטריק לרטי.
        </p>
        <p>
          Source:{' '}
          <a href="https://en.wikipedia.org/wiki/" target="_blank">
            Wikipedia
          </a>
        </p>
      </TabPanel>
      <TabPanel>
        <p>
        לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית. סת אלמנקום ניסי נון ניבאה. דס איאקוליס וולופטה דיאם. וסטיבולום אט דולור, קראס אגת לקטוס וואל אאוגו וסטיבולום סוליסי טידום בעליק. קונדימנטום קורוס בליקרה, נונסטי קלובר בריקנה סטום, לפריקך תצטריק לרטי.
        לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית. סת אלמנקום ניסי נון ניבאה. דס איאקוליס וולופטה דיאם. וסטיבולום אט דולור, קראס אגת לקטוס וואל אאוגו וסטיבולום סוליסי טידום בעליק. קונדימנטום קורוס בליקרה, נונסטי קלובר בריקנה סטום, לפריקך תצטריק לרטי.
        לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית. סת אלמנקום ניסי נון ניבאה. דס איאקוליס וולופטה דיאם. וסטיבולום אט דולור, קראס אגת לקטוס וואל אאוגו וסטיבולום סוליסי טידום בעליק. קונדימנטום קורוס בליקרה, נונסטי קלובר בריקנה סטום, לפריקך תצטריק לרטי.
        </p>
        <p>
          Source:{' '}
          <a href="https://en.wikipedia.org/wiki/" target="_blank">
            Wikipedia
          </a>
        </p>
      </TabPanel>
      <TabPanel>
        <h4>תת כותרת</h4>
        <p>
        לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית. סת אלמנקום ניסי נון ניבאה. דס איאקוליס וולופטה דיאם. וסטיבולום אט דולור, קראס אגת לקטוס וואל אאוגו וסטיבולום סוליסי טידום בעליק. קונדימנטום קורוס בליקרה, נונסטי קלובר בריקנה סטום, לפריקך תצטריק לרטי.
        לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית. סת אלמנקום ניסי נון ניבאה. דס איאקוליס וולופטה דיאם. וסטיבולום אט דולור, קראס אגת לקטוס וואל אאוגו וסטיבולום סוליסי טידום בעליק. קונדימנטום קורוס בליקרה, נונסטי קלובר בריקנה סטום, לפריקך תצטריק לרטי.
        </p>
        <p>
          Source:{' '}
          <a href="https://en.wikipedia.org/wiki/" target="_blank">
            Wikipedia
          </a>
        </p>
      </TabPanel>
    </Tabs>
  </div>
);

render(Component);`;

const hint =
  'This is an example of a right to left option. Just pass the `direction` prop to the <Tabs /> element';

export default () => (
  <ExampleItem
    code={code}
    direction="rtl"
    hint={hint}
    label="Right To Left Example"
  />
);
